function Tab(el) {
  this.el = document.querySelector(el)
  this.init()
}
Tab.prototype.init = function () {
  this.changeTitle()

}
Tab.prototype.changeTitle = function () {
  let ulLiObjs = this.el.querySelectorAll('ul li')
  ulLiObjs.forEach((item, i) => {
    item.onmouseover = () => {
      //改变标题
      this.syncTitle(ulLiObjs, i)
      //同步内容
      this.syncContent(i)
    }
  })
}
Tab.prototype.syncTitle = function (ulLiObjs, i) {
  this.el.querySelector('ul li.active').className = ''
  /*  ulLiObjs.forEach(ulLiObj=>{
     ulLiObj.className = ''
   }) */
  ulLiObjs[i].className = 'active'
}
Tab.prototype.syncContent = function (i) {
  this.el.querySelector('ol li.active').className = ''
  let olLiObjs = this.el.querySelectorAll('ol li')
  olLiObjs[i].className = 'active'
}